<template>
  <div id="userCenter">
    <!-- 标题栏 -->
    <NavBar :title="$t('mine.personalInfo')"> </NavBar>
    <!-- <div class="icon">
      <span class="title">{{ $t("mine.head") }}</span>
      <img src="@/images/common/so_young.png" alt="" />
    </div> -->
    <van-cell-group>
      <van-cell
        :title="$t('mine.personalInfo')"
        is-link
        :value="userInfo.UserName"
      />
      <van-cell
        :title="$t('mine.user_name')"
        is-link
        :value="userInfo.UserName"
      />
      <van-cell :title="$t('mine.userSex')" is-link :value="userInfo.SexText" />
      <van-cell
        :title="$t('mine.Brithday')"
        is-link
        :value="userInfo.Birthday ? userInfo.Birthday : $t('mine.noInput')"
      />
      <van-cell
        :title="$t('mine.phoneNumber')"
        :value="userInfo.PhoneNumber ? phoneNumber : $t('mine.noInput')"
        is-link
      />
    </van-cell-group>

    <van-button size="large" style="margin-top:10px" @click="logOut">{{
      $t("mine.logout")
    }}</van-button>
  </div>
</template>
<script type="text/javascript">
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { Toast, Dialog } from "vant";
import NavBar from "@/components/NavBar";

// 引入时间格式化组件Moment
import moment from "moment";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"]),
    phoneNumber() {
      // 设置隐藏手机号中间四位
      var mobile = String(this.userInfo.PhoneNumber);
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return mobile.replace(reg, "$1****$2");
    }
  },
  components: { NavBar },
  methods: {
    ...mapActions(["Logout"]),
    // 退出登录
    logOut() {
      Dialog.confirm({
        message: this.$t("mine.loginInfo")
      })
        .then(() => {
          // on confirm
          this.Logout();
          Toast({
            message: this.$t("mine.infoSuccess"),
            duration: 800
          });
          this.$router.back();
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="less" scoped></style>
